<template>
  <div class="tagDetBox">
    <div class="tagDetBox-left">
      <div class="tagDetBox_head">
        <p>
          yu
          <span style="font-size: 30px; color: red; margin-right: 10px">
            {{ form.label }} </span
          >tagRelativeArticles
        </p>
        <p>
          totalSearch
          <span
            style="
              font-size: 18px;
              color: red;
              margin-right: 5px;
              margin-left: 5px;
            "
            >{{ num }}</span
          >piece
        </p>
      </div>
      <div class="tagDetBox_tab">
        <h3 style="margin: 5px 0 20px 10px">tagTitle</h3>
        <div>
          <span
            @click="tagdeilbtn(item.value)"
            class="tagTitle"
            v-for="(item, index) in arr"
            :key="index"
          >
            {{ item.label }}{{ item.articleCount }}
          </span>
        </div>
      </div>
      <div class="tagdetBox-main">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="ActicleListBox"
          @click="golistDet(item.id)"
        >
          <p class="ActicleListBox_bigTitle">
            <span class="ActicleListBox_hover">{{ item.title }}</span>
            <span class="ActicleListBox_line">|</span>
            <span class="ActicleListBox_title">
              {{ item.category.label }}
            </span>
          </p>

          <p class="ActicleListBox_p">
            <img class="ActicleListBox_img" :src="item.cover" alt="" />
            <span><van-icon name="like-o" />{{ item.likes }}</span>
            <span><van-icon name="eye-o" />{{ item.views }}</span>
            <span>·</span><span><i class="el-icon-share"></i>share</span>
          </p>
        </div>
      </div>
    </div>
    <div class="tagDetBox-right"></div>

    <!-- <div class="Archives_recommendToReading"></div>
    <div class="Archives_tagTitle"></div> -->
  </div>
</template>

<script>
import { TagTitle, tagTitleList } from "../../api/index";
export default {
  data() {
    return {
      arr: [],
      list: [],
      num: 0,
      form: {},
    };
  },
  //   watch: {
  //     async $route(to, form) {
  //       this.tagdeiladd();
  //     },
  //   },
  mounted() {
    this.tagdeilList();
    this.tagdeiladd();
  },
  created() {},
  methods: {
    async tagdeilList() {
      const { data } = await TagTitle();
      this.arr = data.data;
      data.data.forEach((item) => {
        if (item.value === this.$route.params.id) {
          this.form = item;
          console.log(item);
        }
      });
      console.log(data.data);
    },
    async tagdeiladd() {
      const { data } = await tagTitleList(this.$route.params.id);
      this.list = data.data[0];
      this.num = data.data[1];
      console.log(data.data);
    },
    tagdeilbtn(id) {
      this.$router.push(`/tagdetail/${id}`);
      this.tagdeilList();
    },
  },
};
</script>

<style lang="scss" scoped>
.tagDetBox {
  width: 1000px;
  height: 200vh;
  margin-top: 10px;
  .tagDetBox-left {
    width: 670px;
    height: 200vh;
    float: left;
    margin-left: -80px;
    .tagDetBox_head {
      width: 670px;
      height: 100px;
      background: var(--contentBackground);
      margin-bottom: 20px;
      text-align: center;
    }
    .tagDetBox_tab {
      width: 670px;
      height: 150px;
      margin-top: 20px;
      background: var(--contentBackground);
      margin-bottom: 20px;

      .tagdeil_main h3 {
        width: 100%;
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
        border-bottom: 1px #ccc solid;
      }
      .tagTitle {
        font-size: 8px;
        display: inline-block;
        color: #5f5f5f;
        width: 60px;
        height: 25px;
        line-height: 25px;
        margin: 7px 10px 3px 5px;
        border: solid 1px #ddd;
        text-align: center;
      }
      .tagTitle:hover {
        color: red;
      }
    }
    .tagdetBox-main {
      margin-top: 20px;
      color: var(--titleHcolor);
      .ActicleListBox {
        width: 100%;
        height: 170px;
        background: var(--contentBackground);
        border-bottom: 1px solid #ccc;
        .ActicleListBox_bigTitle {
          margin-left: 20px;
          margin-top: 10px;
        }
        .ActicleListBox_img {
          width: 120px;
          height: 100px;
          margin: 10px 20px 0 20px;
        }
        .ActicleListBox_p span {
          margin-left: 5px;
          color: #6b6863;
        }
        .ActicleListBox_hover {
          font-size: 16px;
          font-weight: bold;
        }
        .ActicleListBox_hover:hover {
          color: red;
        }
        .ActicleListBox_title {
          color: #7a7e89;
        }
        .ActicleListBox_line {
          color: #7a7e89;
          margin: 0 5px 0 5px;
        }
      }
    }
  }
}
.tagDetBox-right {
  font-size: 28px;
  width: 320px;
  height: 100vh;
  background: blue;
  float: right;

  .tabDetBox_recommendToReading {
    background: var(--contentBackground);
  }
  .tabDetBox_tagTitle {
    font-size: 14px;
    width: 320px;
    height: 300px;
    background: var(--contentBackground);
  }
}
</style>
